import React from 'react';
import Layout from '../components/Layout';
import Banner from '../components/Banner';
import Image from 'next/image';
import Link from 'next/link';

const ProductsPage = () => {
  // 软件产品数据
  const softwareProducts = [
    {
      id: 1,
      name: "智能数据分析平台",
      description: "基于人工智能的企业级数据分析平台，帮助企业快速发现数据价值，提升决策效率。",
      image: "/images/products/data-analytics.jpg",
      features: ["实时数据处理", "智能数据可视化", "预测分析", "自定义报表"],
      link: "/products/data-analytics"
    },
    {
      id: 2,
      name: "云端协作系统",
      description: "为企业提供安全高效的云端协作环境，支持远程办公和团队协作。",
      image: "/images/products/cloud-collaboration.jpg",
      features: ["实时文档协作", "视频会议", "项目管理", "智能日程"],
      link: "/products/cloud-collaboration"
    },
    {
      id: 3,
      name: "智慧客户管理系统",
      description: "整合营销、销售和客服功能的客户关系管理系统，提升客户满意度和忠诚度。",
      image: "/images/products/crm.jpg",
      features: ["客户画像", "智能推荐", "销售漏斗分析", "客户服务自动化"],
      link: "/products/crm"
    }
  ];

  // 硬件产品数据
  const hardwareProducts = [
    {
      id: 1,
      name: "工业物联网传感器",
      description: "高精度、低功耗的工业级传感器，适用于各类生产环境监测和数据采集。",
      image: "/images/products/iot-sensor.jpg",
      features: ["高精度感应", "低功耗设计", "远程数据传输", "耐高温防水"],
      link: "/products/iot-sensor"
    },
    {
      id: 2,
      name: "智能工业控制器",
      description: "集成多种控制功能的工业级控制器，支持远程监控和智能调度。",
      image: "/images/products/controller.jpg",
      features: ["多协议支持", "远程控制", "智能调度", "故障预警"],
      link: "/products/controller"
    },
    {
      id: 3,
      name: "AR智能眼镜",
      description: "为工业现场提供增强现实支持，提升工作效率和安全性。",
      image: "/images/products/ar-glasses.jpg",
      features: ["实时数据显示", "远程专家支持", "工作流程指导", "环境感知"],
      link: "/products/ar-glasses"
    }
  ];

  return (
    <Layout title="产品服务 - 凡科星悦" description="凡科星悦提供创新的软件与硬件产品，助力企业数字化转型">
      <Banner 
        title="产品与服务" 
        subtitle="我们提供创新的软硬件产品和专业服务，满足企业多样化的数字化需求" 
        backgroundImage="/images/products-banner.jpg"
      />

      {/* 产品概述 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">全面的解决方案</h2>
            <p className="text-gray-600 leading-relaxed">
              凡科星悦提供从软件到硬件、从咨询到实施的全方位解决方案，帮助企业在数字化转型过程中
              提升效率、降低成本，并创造新的商业价值。我们的产品和服务覆盖数据分析、云计算、
              物联网、人工智能等多个领域，为不同行业客户提供定制化服务。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-blue-50 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">软件产品</h3>
              <p className="text-gray-600">
                提供企业级数据分析、云协作、智能客户管理等多种软件产品，满足不同业务场景需求。
              </p>
            </div>
            
            <div className="bg-blue-50 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">硬件产品</h3>
              <p className="text-gray-600">
                开发工业级物联网传感器、智能控制器、AR设备等硬件产品，助力工业智能化升级。
              </p>
            </div>
            
            <div className="bg-blue-50 rounded-lg p-8 text-center hover:shadow-lg transition-shadow">
              <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mb-6 mx-auto">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-bold text-gray-800 mb-3">专业服务</h3>
              <p className="text-gray-600">
                提供数字化转型咨询、系统集成、技术培训和运维支持等全生命周期专业服务。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 软件产品 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">软件产品</h2>
            <p className="text-gray-600">
              我们开发的软件产品结合前沿技术和行业需求，为企业提供智能化解决方案
            </p>
          </div>

          <div className="space-y-16">
            {softwareProducts.map((product, index) => (
              <div key={product.id} className={`flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} items-center bg-white rounded-lg overflow-hidden shadow-md`}>
                <div className="md:w-1/2 relative h-64 md:h-auto">
                  <Image 
                    src={product.image} 
                    alt={product.name} 
                    layout="fill" 
                    objectFit="cover" 
                  />
                </div>
                <div className="md:w-1/2 p-8">
                  <h3 className="text-2xl font-bold text-gray-800 mb-3">{product.name}</h3>
                  <p className="text-gray-600 mb-4">
                    {product.description}
                  </p>
                  <ul className="mb-6 space-y-2">
                    {product.features.map((feature, i) => (
                      <li key={i} className="flex items-center text-gray-600">
                        <svg className="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        {feature}
                      </li>
                    ))}
                  </ul>
                  <Link href={product.link}>
                    <span className="inline-block px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300 cursor-pointer">了解更多</span>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 硬件产品 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">硬件产品</h2>
            <p className="text-gray-600">
              我们的硬件产品采用先进工艺制造，具有高可靠性、易集成、易维护的特点
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {hardwareProducts.map(product => (
              <div key={product.id} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
                <div className="relative h-48">
                  <Image 
                    src={product.image} 
                    alt={product.name} 
                    layout="fill" 
                    objectFit="cover" 
                  />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold text-gray-800 mb-3">{product.name}</h3>
                  <p className="text-gray-600 mb-4">
                    {product.description}
                  </p>
                  <div className="mb-6">
                    <h4 className="text-sm font-semibold text-gray-700 mb-2">主要特点：</h4>
                    <ul className="space-y-1">
                      {product.features.map((feature, i) => (
                        <li key={i} className="flex items-center text-gray-600 text-sm">
                          <svg className="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                          </svg>
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Link href={product.link}>
                    <span className="inline-block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300 cursor-pointer">查看详情</span>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 专业服务 */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">专业服务</h2>
            <p className="text-gray-600">
              我们提供全方位的专业服务，从战略咨询到技术实施，帮助企业顺利完成数字化转型
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-800">战略咨询</h3>
              </div>
              <p className="text-gray-600">
                提供数字化转型规划、IT战略制定、业务流程优化等咨询服务，帮助企业明确转型路径。
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-800">系统集成</h3>
              </div>
              <p className="text-gray-600">
                提供软硬件系统集成服务，包括需求分析、方案设计、系统实施和上线运行。
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 14l9-5-9-5-9 5 9 5z"></path>
                    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-800">技术培训</h3>
              </div>
              <p className="text-gray-600">
                提供系统操作、技术维护、数据分析等方面的培训，帮助客户掌握系统使用和维护技能。
              </p>
            </div>
            
            <div className="bg-white p-8 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                  <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-800">运维支持</h3>
              </div>
              <p className="text-gray-600">
                提供7x24小时技术支持、定期系统检查、性能优化、故障排除等运维服务。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 客户案例 */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl font-bold text-gray-800 mb-4">成功案例</h2>
            <p className="text-gray-600">
              我们已成功为多个行业的客户提供了数字化解决方案，帮助他们实现业务增长
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client1.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client2.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client3.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client4.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client5.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client6.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client7.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
            <div className="p-4 grayscale hover:grayscale-0 transition-all duration-300">
              <Image src="/images/clients/client8.png" alt="客户标志" width={200} height={80} layout="responsive" objectFit="contain" />
            </div>
          </div>
        </div>
      </section>

      {/* 咨询联系 */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold mb-4">准备开始您的数字化转型之旅？</h2>
            <p className="mb-8 opacity-90">
              联系我们的专业团队，获取定制化的解决方案和优质服务
            </p>
            <Link href="/contact">
              <span className="inline-block px-8 py-4 bg-white text-blue-600 rounded-full font-medium hover:bg-blue-50 transition-colors duration-300 shadow-lg cursor-pointer">
                免费咨询
                <svg className="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
              </span>
            </Link>
          </div>
        </div>
      </section>
    </Layout>
  );
};

export default ProductsPage; 